<template>
  <view class="my-orders-page">
    <!-- 头部导航 -->
    <myHeader title="我的发单" showBack />

    <view class="orders-body-wrap">
      <!-- 标签切换栏 -->
      <view class="tab-bar">
        <view
          class="tab-item"
          v-for="(tab, index) in tabList"
          :key="index"
          @click="switchTab(index)"
          :class="{ active: currentTab === index }"
        >
          {{ tab.name }}
        </view>
      </view>

      <!-- 内容区域，根据标签显示对应数据 -->
      <view class="content">
        <block>
          <!-- 悬赏中 -->
          <view class="order-list" v-if="bountyList.length > 0">
            <orderItem
              v-for="(item, index) in bountyList"
              :key="index"
              :item="item"
            ></orderItem>
          </view>
          <view class="empty-tip" v-else>
            <image
              class="empty-img"
              src="https://www.rebirthealth.com/static/images/empty-order.png"
            ></image>
            <view class="tip-text">暂无数据</view>
          </view>
        </block>
      </view>
    </view>
  </view>
</template>

<script>
import myHeader from "@/component/header";
import orderItem from "@/component/orderItem";
import { getMyOrderList } from "@/api";
export default {
  components: {
    myHeader,
    orderItem,
  },
  data() {
    return {
      currentTab: 0, // 当前选中标签索引，0：悬赏中，1：已接单，2：已结单
      tabList: [
        {
          name: "待支付",
          id: 0,
        },
        {
          name: "悬赏中",
          id: 2,
        },
		{
		  name: "已接单",
		  id: 3,
		},
        {
          name: "已结单",
          id: 4,
        },
      ],
      // 模拟数据，实际可通过接口获取
      bountyList: [],
      receivedList: [], // 已接单数据，这里模拟无数据
      finishedList: [], // 已结单数据，这里模拟无数据
      page: {
        pageNo: 1,
        pageSize: 4,
        total: 0,
      },
      type: 1,
    };
  },
  onLoad(options) {
    this.type = options.type;
    if (this.type == 2) {
      this.tabList = [
        {
          name: "已接单",
          id: 3,
        },
        {
          name: "悬赏中",
          id: 2,
        },
        {
          name: "已结单",
          id: 4,
        },
      ];
    }
    this.getList();
  },
  mounted() {},
  methods: {
    // 返回上一级页面
    goBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
    // 切换标签
    switchTab(index) {
      this.currentTab = index;
      this.page.pageSize = 4;
      this.getList();
    },
    async getList() {
      let res = await getMyOrderList({
        pageNo: this.page.pageNo,
        pageSize: this.page.pageSize,
        type: this.type,
        status: this.tabList[this.currentTab].id,
      });
      this.bountyList = res.list;
      this.page.total = res.total;
    },
    onReachBottom() {
      if (this.page.total <= this.bountyList.length) {
        return;
      }
      this.page.pageSize += 4;
      this.getList();
    },
  },
};
</script>

<style lang="less" scoped>
.my-orders-page {
  background-color: rgba(19, 30, 50, 1);
  min-height: 100vh;
  color: #fff;
  .orders-body-wrap {
    padding: 18rpx 32rpx;
    box-sizing: border-box;
  }
  // 标签栏样式
  .tab-bar {
    display: flex;
    background: #f5f7fa;
    border-radius: 16rpx;
    padding: 16rpx 24rpx;
    justify-content: space-between;
    margin-bottom: 30rpx;
    .tab-item {
      width: 192rpx;
      height: 76rpx;
      line-height: 76rpx;
      text-align: center;
      border: 1px solid rgba(51, 158, 255, 1);
      border-radius: 4rpx;
      color: rgba(51, 158, 255, 1);
      font-size: 32rpx;
      &.active {
        background-color: rgba(4, 95, 178, 1);
        border-color: rgba(4, 95, 178, 1);
        color: #fff;
      }
    }
  }

  // 内容区域样式
  .content {
    .empty-tip {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 100rpx;

      .empty-img {
        width: 120rpx;
        height: 120rpx;
        margin-bottom: 20rpx;
      }

      .tip-text {
        font-size: 28rpx;
        color: #999;
      }
    }
  }
}
</style>